/**
 Returns true if the passed function is a valid styled components-wrapped component class. It can be useful for determining if a component needs to be wrapped such that it can be used as a component selector:
*/
import React from 'react'
import styled, { isStyledComponent } from 'styled-components'
// import MaybeStyledComponent from './somewhere-else'

const MaybeStyledComponent = (props) => {
  return (
    <div className={props.className}>
      MaybeStyledComponent
    </div>
  )
};

const TargetedComponent = isStyledComponent(MaybeStyledComponent)
  ? MaybeStyledComponent
  : styled(MaybeStyledComponent)``;

// console.log(TargetedComponent === MaybeStyledComponent); // false
console.log('TargetedComponent:',TargetedComponent);

const ParentComponent = styled.div`
  color: cornflowerblue;

  ${TargetedComponent} {
    color: tomato;
  }
`;

export default ()=>(
  <ParentComponent>
    <TargetedComponent/>
  </ParentComponent>
)
